<script setup>
import { userLoginService } from '@/api/user.js'
import { ref } from 'vue'
import { useUserStore } from '@/stores'
import { useRouter } from 'vue-router'
const form = ref()

// 用户表（ucs_user）
// 编号（id），账号（account），
// 密码（passwd），邮箱（email），账号等级（type）
// 整个的用于提交的form数据对象
const formModel = ref({
  account: '',
  passwd: '',
  repassword: ''
})
// 整个表单的校验规则
// 1. 非空校验 required: true      message消息提示，  trigger触发校验的时机 blur change
// 2. 长度校验 min:xx, max: xx
// 3. 正则校验 pattern: 正则规则    \S 非空字符
// 4. 自定义校验 => 自己写逻辑校验 (校验函数)
//    validator: (rule, value, callback)
//    (1) rule  当前校验规则相关的信息
//    (2) value 所校验的表单元素目前的表单值
//    (3) callback 无论成功还是失败，都需要 callback 回调
//        - callback() 校验成功
//        - callback(new Error(错误信息)) 校验失败
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 5, max: 10, message: '用户名必须是 5-10位 的字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      pattern: /^\S{6,15}$/,
      message: '密码必须是 6-15位 的非空字符',
      trigger: 'blur'
    }
  ],
  repassword: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      pattern: /^\S{6,15}$/,
      message: '密码必须是 6-15位 的非空字符',
      trigger: 'blur'
    },
    {
      validator: (rule, value, callback) => {
        // 判断 value 和 当前 form 中收集的 password 是否一致
        if (value !== formModel.value.passwd) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback() // 就算校验成功，也需要callback
        }
      },
      trigger: 'blur'
    }
  ]
}

const userStore = useUserStore()
const router = useRouter()
// 登入
const login = async () => {
  await form.value.validate()
  const res = await userLoginService(formModel.value)
  userStore.setToken(res.data.data.token)
  userStore.getUser(res.data.data)
  router.push('/node')
  ElMessage.success('登录成功')
  // const userType = res.data.data.userType
  // if (userType) {
  //   ElMessage.success('登录成功')
  //   router.push('/node')
  // }
}
</script>

<template>
  <div class="login-page">
    <el-form :model="formModel" :rules="rules" ref="form" class="login">
      <div class="title">
        <span>算法节点平台</span>
      </div>

      <div class="login-input" prop="account">
        <img src="@/assets/icons_user.png" class="login-icon" />
        <input
          type="text"
          placeholder="账号"
          class="input-field"
          v-model="formModel.account"
        />
      </div>

      <div class="login-input" prop="passwd">
        <img src="@/assets/icons_password.png" class="login-icon" />
        <input
          type="password"
          placeholder="密码"
          class="input-field"
          v-model="formModel.passwd"
        />
      </div>

      <el-button type="primary" class="login-btn" @click="login"
        >登录</el-button
      >

      <div class="footer">
        <span>管理员登录/找密码</span>
      </div>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #1b1f38;
}

.login {
  width: 426px;
  height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #313862;
  border-radius: 5px;
}

.title {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  margin-bottom: 30px;
}

.login-input {
  display: flex;
  align-items: center;
  width: 70%;
  margin-bottom: 15px;
  margin-right: 40px;
}

.input-field {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
  font-size: 16px;
  background-color: transparent;
  color: #fff;
}

.login-btn {
  width: 50%;
  height: 45px;
  border-radius: 25px;
  margin-top: 20px;
}

.footer {
  font-size: 12px;
  color: #fff;
  margin-top: 20px;
  margin-left: 200px;
}
.input-field::placeholder {
  color: #fff;
}
.login-icon {
  width: 25px;
  margin-right: 15px;
}
</style>
